<template>
  <div class="c-fs34 c-wb-ba">
    <div v-if="questionInfo.type==1 || questionInfo.type==2 || questionInfo.type==4">
      <div v-for="(item,index) in optionsList" :key="index" :class="optionClass[index]=='choose'?'theme-bg-10':''" class="c-ph24 c-flex-row c-pv30 c-fs26 c-br16 c-bg-sblack c-mt20 c-bg-sgray" @click="clickOption(index)">
        <div class="c-mr20 c-mt4" :class="optionClass[index]=='choose'?'theme-fc':''">{{item.type}}</div>
        <div class="c-wb-ba copyNot imgInlineb c-textAlign-j problemdDom" :class="optionClass[index]=='choose'?'theme-fc':''" v-html="item.name"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "singleChoice",
  props: {
    questionInfo: {
      type: Object,
      default: null
    },
    number: {
      type: Number,
      default: 0
    },
    mId: {
      type: Number,
      default: 0
    },
    isRewoker: {
      type: Number,
      default: 0
    },
    userAnswer: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      optionClass: [],
      optionsList:[],
      fbAnswer:[],
      answerList: [false, false, false, false, false, false, false, false, false, false],
    };
  },
  watch: {
  },
  mounted() {
    this.answerList = [false, false, false, false, false, false, false, false, false, false];
    this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
    this.showOption()
    if (this.userAnswer) {
      console.log(this.userAnswer.length)
      const optionArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
      for (let i = 0; i < this.userAnswer.length; i++) {
        for (let j = 0;j < optionArr.length; j++) {
          if (this.userAnswer[i] == optionArr[j]) {
            this.$set(this.answerList, j, true);
            this.$set(this.optionClass, j, 'choose');
            // this.userAnswer = this.transAnswerText();
          }
        }
      }
    }
  },
  methods: {
    showMoreQue() {
      this.moreQue = !this.moreQue
    },
    showOption() {
      let $this = this
      if ($this.questionInfo.type == 4 || $this.questionInfo.smallType == 4) {
        $this.questionInfo.optionA = "正确";
        $this.questionInfo.optionB = "错误";
      }
      if ($this.questionInfo.type == 1 || $this.questionInfo.type == 2 || $this.questionInfo.type == 4) {
          const optionArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
          for (let i = 0; i < 10; i++) {
            let optionSty = `option${optionArr[i]}`;
            if ($this.questionInfo[optionSty] != '' && $this.questionInfo[optionSty] != null) {
              $this.optionsList.push({ type: optionArr[i], name: $this.questionInfo[optionSty] });
            }
          }
        }
    },
    clickOption(index) {
      if (this.isRewoker == 1) {
        this.$showCjToast({
          text:"客观题不支持重新提交",
          type: "warn",
          time: 1500
        });
        return
      }
      if (this.questionInfo.type == 1 || this.questionInfo.type == 4) {
        this.answerList = [false, false, false, false, false, false, false, false, false, false];
        this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
        this.$set(this.answerList, index, true);
        this.$set(this.optionClass, index, 'choose');
        this.userAnswer = this.transAnswerText();
      } else if (this.questionInfo.type == 2) {
        if (this.optionClass[index] == 'choose') {
          this.$set(this.answerList, index, false);
          this.$set(this.optionClass, index, 'noChoose');
        } else if (this.optionClass[index] == 'noChoose') {
          this.$set(this.answerList, index, true);
          this.$set(this.optionClass, index, 'choose');
        }
        this.userAnswer = this.transAnswerText();
      }
      this.$emit('pushAnswer', this.mId, this.userAnswer, this.questionInfo.type)
    },
    transAnswerText() {
      var answerText = '';
      let lettersT = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
      if (this.questionInfo.type == 1 || this.questionInfo.type == 2 || this.questionInfo.type == 4) {
        console.log(this.optionsList)
        for (let i = 0; i < this.optionsList.length; i++) {
          if (this.answerList[i] == true) {
            answerText = answerText + lettersT[i];
          }
        }
      }
      return answerText
    },
  },
  destroyed() {
  }
};
</script>

<style scoped>
.imgInlineb  /deep/ img{display: inline-block;vertical-align: middle;}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ p img{
  display: block;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
</style>
